<style lang="scss">
@import "./uv.scss";
</style>
<template>
  <div>
    <u-my-layOut :navbarOption="{ bgColor: '#FAFAFA', title: '骑手评价', border: true }" :color="{ statusBarHeightColor: '#FAFAFA' }">
      <template v-slot:header>
      </template>
      <template v-slot:main>
        <div class=" pl30 pr30 pt40">
          <div class="p1756266177">
            <uv-cell-group :border="false">
              <uv-cell :center="false" :cellStyle="{padding: '0'}" :rightIconStyle="{fontSize: '40rpx', color: '#C9CACA'}" :titleStyle="{fontSize: '34rpx', lineHeight: 1, paddingLeft: '30rpx', paddingTop: '10rpx'}" :border="false" title="平台骑士" value="已对骑士匿名">
                <template v-slot:label>
                  <div class="fz26 pl30 pt10" style="line-height:2;color: #9FA0A0;">{{form.neighbor_worker &&
                form.neighbor_worker.real_name}}</div>
                </template>
                <template v-slot:value>
                  <div class="fz26 " style="color: #9FA0A0;">已对骑士匿名</div>
                </template>
                <template v-slot:icon>
                  <uv-avatar class="mr20" size="80rpx" src="" shape="square"></uv-avatar>
                </template>
              </uv-cell>
            </uv-cell-group>
            <div class="p1756265313">
              <uv-radio-group @change="radiovalueChange" v-model="radiovalue">
                <uv-radio :customStyle="{margin: '0 50rpx'}" name="2" label="不满意">
                  <img class="p1756265228" v-show="radiovalue == 2" src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0827/0e386202508271046103979.png" alt="选择不满意">
                  <img class="p1756265228" v-show="radiovalue != 2" src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0827/42e5f202508271045432414.png" alt="不满意">
                  <div class="fz28 pt10" style="text-align: center;" :style="{color: radiovalue == 2 ? '#8CBDDF' : '#9FA0A0'}">不满意</div>
                </uv-radio>
                <uv-radio :customStyle="{margin: '0 50rpx'}" name="1" label="满意">
                  <img class="p1756265228" v-show="radiovalue == 1" src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0827/4d8eb202508271044358063.png" alt="选择满意">
                  <img class="p1756265228" v-show="radiovalue != 1" src="https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0827/c5207202508271045198210.png" alt="满意">
                  <div class="fz28 pt10" style="text-align: center;" :style="{color: radiovalue == 1 ? '#EA5514' : '#9FA0A0'}">满意</div>
                </uv-radio>
              </uv-radio-group>
            </div>
            <view class="p1756262706" :class="'p1756262706-' + radiovalue">
              <uv-tags borderColor="rgba(255, 255, 255, 0)" v-for="(item, index) in list" :key="index" size="mini" :text="item.name" :plain="!item.checked" type="info" :name="item.id" @click="checkboxClick(item, index)">
              </uv-tags>
            </view>
          </div>

        </div>
      </template>
      <template v-slot:footer>
        <div class="pb30">
        <button @click="submitTap" class="common-button fz36 p1756193077 ml30 mr30" style="color: #fff; ">提交评价</button>
        </div>
      </template>
    </u-my-layOut>
  </div>
</template>
<script>
import { getCommentRiderType, getUserOrderInfo, addCommentRider } from '@/api/index.js'
import myLayOutVue from "./components/layOut.vue";
export default {
  components: {
    "u-my-layOut": myLayOutVue,
  },
  data() {
    return {
      routeQuery: {},
      leftList: [],
      rightList: [],
      list: [],
      radiovalue: '',
      form: {}
    }
  },
  onLoad(options) {
    if (options) this.routeQuery = options

  },
  onShow() {
    this._initPage()
  },
  methods: {

    _initPage() {
      uni.showLoading({ title: '加载中', mask: true })
      if (this.routeQuery.id) {
        getUserOrderInfo(this.routeQuery.id).then(res => {
          uni.hideLoading()
          if (res.code == 200) {
            uni.hideLoading()
            this.form = res.result
          }
        })
      }
    },
    submitTap() {
      let data = this.list.filter(i => i.checked == true && i.id)
      if (!data.length) return this.$uv.toast('请选择评价类型')

      uni.showLoading({ title: '加载中', mask: true })
      if (this.routeQuery.id) {
        addCommentRider({ type: this.radiovalue, neighbor_worker_order_id: this.form.id, comment_rider_type_ids: data.map(i => i.id) }).then(res => {
          uni.hideLoading()
          if (res.code == 200) {
            uni.hideLoading()
            uni.redirectTo({
              url: '/pages-worker/result?url=' + encodeURIComponent('/pages-worker/list') + '&type=success&msg=提交成功'
            });
          }
        })
      }

    },
    radiovalueChange(value) {
      if (this.radiovalue == 2) this.list = JSON.parse(JSON.stringify(this.leftList))
      if (this.radiovalue == 1) this.list = JSON.parse(JSON.stringify(this.rightList))
      this._getCommentRiderType(value)
    },
    checkboxClick(item, index) {

      this.$set(this.list[index], 'checked', !this.list[index].checked)
    },
    _getCommentRiderType(type = 2) {
      if (type == 2 && this.leftList.length) {
        this.list = JSON.parse(JSON.stringify(this.leftList))
        return
      }
      if (type == 1 && this.rightList.length) {
        this.list = JSON.parse(JSON.stringify(this.rightList))
        return
      }
      uni.hideLoading()
      uni.showLoading({ title: '加载中', mask: true })
      getCommentRiderType({ type: type }).then(res => {
        if (res.code == 200) {
          uni.hideLoading()
          if (type == 2) {
            this.leftList = res.result.map(item => {
              item.checked = false
              return item
            })
            this.list = JSON.parse(JSON.stringify(this.leftList))
          }
          if (type == 1) {
            this.rightList = res.result.map(item => {
              item.checked = false
              return item
            })
            this.list = JSON.parse(JSON.stringify(this.rightList))
          }
        }
      })
    },
  }
}
</script>
<style lang="scss">
page {
  background-color: #fafafa;
}
</style>
<style lang="scss" scoped>
@import "./common.scss";
.p1756265228 {
  width: 100rpx;
  height: 100rpx;
}

.p1756191456 {
  height: 90rpx;
  line-height: 90rpx;
  position: fixed;
  bottom: 60rpx;
  box-sizing: border-box;
  width: calc(100% - 60rpx);
}



.p1756266177 {
  padding: 30rpx;
  border-radius: 20rpx;
  background: #fff;
  box-shadow: 2rpx 2rpx 20rpx 2rpx #eeeeee;
}

.p1756265313 {
  margin: 60rpx 0 40rpx 0;
}

.p1756262706 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.p1756193077 {
  border-radius: 10rpx!important;
  height: 94rpx!important;
  max-height: 94rpx!important;
  line-height: 94rpx!important;
  font-weight: 500!important;
  font-size: 36rpx!important;
  text-align: center;
  width: calc(100% - 60rpx);
  box-sizing: border-box!important;
  color: #fff;
  background-color: #e60012!important;
}
</style>